<template>
  <div class="mg-t-20">
    <div class="demo-inner-divider">基础穿梭框</div>
    <e-transfer
      :data="getMockData()"
      :target-keys="targetKeys1"
      :render-format="render1"
      @on-change="handleChange1">
    </e-transfer>
  </div>
  <div class="mg-t-20">
    <div class="demo-inner-divider">搜索样式</div>
    <e-transfer
      :data="getMockData()"
      :target-keys="targetKeys1"
      :render-format="render1"
      :filterable="true"
      @on-change="handleChange1">
    </e-transfer>
  </div>
  <div class="mg-t-20">
    <div class="demo-inner-divider">表格样式</div>
    <e-transfer
      :list-style="listStyle"
      :data="tableData"
      :target-keys="tableTargetKeys"
      :render-format="render2"
      :filterable="true"
      :as-table="true"
      :columns="columns"
      @on-change="handleChangeTable">
    </e-transfer>
  </div>
  <transfer-md class="markdown-body mg-t-20">
  </transfer-md>
</template>
<script>
import transferMd from '../../docs/transfer.md';

export default {
  data () {
    return {
      listStyle: {
        width: '313px',
        height: '368px'
      },
      tableData: [{
        key: '1',
        name: 'ZJBCICD',
        content: '文本类型',
      },
      {
        key: '2',
        name: 'SCM',
        content: '文本类型',
      }],
      tableTargetKeys: [],
      targetKeys1: this.getTargetKeys(),
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '任务名称',
          key: 'name',
          resizable: true
        },
        {
          title: '描述',
          key: 'content',
          resizable: true
        },
      ],
    }
  },
  components: {
    transferMd
  },
  methods: {
    getMockData () {
      let mockData = [];
      for (let i = 1; i <= 20; i++) {
        mockData.push({
          key: i.toString(),
          label: '选项' + i,
          description: '选项' + i + '的描述信息',
          disabled: Math.random() * 3 < 1
        });
      }
      return mockData;
    },
    getTargetKeys () {
      return this.getMockData()
        .filter(() => Math.random() * 2 > 1)
        .map(item => item.key);
    },
    render1 (item) {
      return item.label;
    },
    render2(item) {
      return item.name;
    },
    handleChange1 (newTargetKeys, direction, moveKeys) {
      console.log(newTargetKeys);
      console.log(direction);
      console.log(moveKeys);
      this.targetKeys1 = newTargetKeys;
    },
    handleChangeTable(newTargetKeys) {
      this.tableTargetKeys = newTargetKeys;
    }
  }
}
</script>
<style scoped>
  .mg-t-20 {
    margin-top: 20px;
  }
</style>
